@model WalkingTec.Mvvm.Doc.ViewModels.DepartmentVms.DepartmentVM

<wt:quote>
  <p>Tree control is mainly used to submit the data of tree structure in the form</p>
  <p>If you want to use Tree as a navigation, refer to the TreeContainercontrol</p>
</wt:quote>
<wt:fieldset field-set-style="Simple" title="Tree Model">
  <p>The simplest way to implement the tree model is to inherit the ITreeData interface provided by the framework.</p>
  <p>The following shows the model of a ‘department’, which is a tree structure. Each department may have a parent department.</p>
  <wt:code>
public class Department : BasePoco,ITreeData&lt;Department&gt;
{
  [Display(Name = "Department name")]
  [Required()]
  public string DepName { get; set; }

  public List&lt;Department&gt;
  Children { get; set; }

  [Display(Name = "Parent")]
  public Department Parent { get; set; }

  [Display(Name = "Parent")]
  public Guid? ParentId { get; set; }
}
  </wt:code>
</wt:fieldset>
<wt:fieldset field-set-style="Simple" title="Tree">
</wt:fieldset>
<p>Common properties of tree are:</p>
<table lay-filter="parse-table-demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:200}">Property</th>
      <th lay-data="{field:'required', width:100}">Requird</th>
      <th lay-data="{field:'joinTime', width:600}">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Id</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>Control ID, generated by default according to the bound field name</td>
    </tr>
    <tr>
      <td>Field</td>
      <td><i class="layui-icon layui-icon-ok"></i></td>
      <td>Binding field</td>
    </tr>
    <tr>
      <td>ShowLine</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>If to display the connection, default=true</td>
    </tr>
    <tr>
      <td>Name</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>Control name, generated by default according to the bound field name</td>
    </tr>
    <tr>
      <td>LabelText</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>Label content</td>
    </tr>
    <tr>
      <td>LabelWidth</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>Label length, default= 80</td>
    </tr>
    <tr>
      <td>HideLabel</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>Hide label,or not</td>
    </tr>
    <tr>
      <td>Items</td>
      <td><i class="layui-icon layui-icon-ok"></i></td>
      <td>List data source, type=list<TreeSelectListItem></td>
    </tr>
    <tr>
      <td>ClickFunc</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>JS method name triggered by clicking the node,  the framework will pass a parameter containing the node information to the JS method. For example, if your own JS method is func onclick (data) {...}, you can set click func = 'onclick' on the control</td>
    </tr>
    <tr>
      <td>CheckFunc</td>
      <td><i class="layui-icon layui-icon-close"></i></td>
      <td>JS method name triggered by checking the node,the framework will pass a parameter containing the node information to the JS method. For example, if your own JS method is func onCheck (data) {...}, you can set check func = 'onCheck' on the control</td>
    </tr>
  </tbody>
</table>
<wt:quote>
  <p>Tree can determine whether it is a single selection mode or multiple mode according to the type of bound Field. Set the data source through the Items property. Items need to be bound to a List></p>
  <p>TreeSelectListItem is an auxiliary class provided by the framework, with properties such as Id，Text，Url，Childrenetc</p>
  <p>Inheriting the model of ITreeData interface, it is convenient to call the functions provided by the framework to generate the data format needed by tree control,</p>
  <p>For example, DC. Set(). Gettreeselectlistitems (loginuserinfo. Dataprivileges, null, x = &gt; x.depname) can read the database directly and generate a List&lt;TreeSelectListItem&gt;</p>
</wt:quote>
<wt:tab>
  <wt:tabheaders>
    <wt:tabheader title="Effect" />
    <wt:tabheader title="Code" />
  </wt:tabheaders>
  <wt:tabcontents>
    <wt:tabcontent>
      <wt:form vm="@Model" style="max-width:600px;">
        <wt:textbox field="Entity.DepName" />
        <wt:tree field="Entity.ParentId" items="AllDeps" height="300" />
        <wt:row align="AlignEnum.Right">
          <wt:submitbutton disabled="true" />
          <wt:closebutton disabled="true" />
        </wt:row>
      </wt:form>
    </wt:tabcontent>
    <wt:tabcontent>
      <wt:code>
        &lt;wt:form vm="@Model" style="max-width:600px;"&gt;
          &lt;wt:textbox field="Entity.DepName" /&gt;
          &lt;wt:tree field="Entity.ParentId" items="AllDeps" height="300" /&gt;
          &lt;wt:row align="AlignEnum.Right"&gt;
            &lt;wt:submitbutton disabled="true" /&gt;
            &lt;wt:closebutton disabled="true" /&gt;
          &lt;/wt:row&gt;
        &lt;/wt:form&gt;
      </wt:code>
    </wt:tabcontent>
  </wt:tabcontents>
</wt:tab>

<p>EntityParentId of tree binding is a single Guid type, Tree automatically uses the single selection mode;</p>
<p>If the bound field is a List, tree will use multi selection mode, as follows:</p>

<wt:tab>
  <wt:tabheaders>
    <wt:tabheader title="Multiselect" />
  </wt:tabheaders>
  <wt:tabcontents>
    <wt:tabcontent>
      <wt:form vm="@Model" style="max-width:600px;">
        <wt:textbox field="Entity.DepName" />
        <wt:tree field="SelectedIds" items="AllDeps" height="300" label-text="Multi" />
        <wt:row align="AlignEnum.Right">
          <wt:submitbutton disabled="true" />
          <wt:closebutton disabled="true" />
        </wt:row>
      </wt:form>
    </wt:tabcontent>
  </wt:tabcontents>
</wt:tab>



<script>
  layui.use('code', function () { layui.code({ about: false }) })
  layui.table.init('parse-table-demo', {
    limit: 100, page: false
  });
</script>


<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
